// 获取元素
// login
var headerLogin = document.querySelectorAll('.header_login')[0];

// header
var article = document.querySelectorAll('.article')[0];
var articleTitle = document.querySelectorAll('.article_title')[0];
var articleClassify = document.querySelectorAll('.article_classify')[0];
var articleContent = document.querySelectorAll('.article_content')[0];
var articleContinue = document.querySelectorAll('.article_continue')[0];
var articleTime = document.querySelectorAll('.article_time')[0];

// footer
var footer = document.querySelectorAll('.footer')[0];
var footerList = footer.querySelectorAll('.footer_list')[0];
var footerPages = footer.querySelectorAll('.footer_pages')[0];
var footerItems = footer.querySelectorAll('.footer_item')[0]

//hot
var hot = document.querySelectorAll('.hot')[0];
var hotList = hot.querySelectorAll('.hot_list')[0];


//commend
var commend = document.querySelectorAll('.commend')[0];
var commendList = commend.querySelectorAll('.commend_list')[0];

// all_article
var w = document.querySelector('.w');
var allArticle = document.querySelector('.allarticle');
var allArticleClassify = document.querySelector('.allarticle_classify');
var allArticleContent = document.querySelector('.allarticle_content');
var allArticleContinue = document.querySelector('.allarticle_continue');
var allArticleTime = document.querySelector('.allarticle_time');

// 给登录按钮挂载监听器,设置点击事件
headerLogin.addEventListener('click',function() {
    // 未登录进入登录页面,已登录直接进入admin页面
    location.href = '/admin';
})

// 最新文章渲染
function renderArticle(data) {
    var item = JSON.parse(data)[0];
    articleTitle.innerText = item.title;
    articleContent.innerText = item.content.slice(0, 100) + '...';
    articleTime.innerText = item.time;
    articleClassify.innerText = item.classify;
    // 继续阅读 设置属性
    articleContinue.setAttribute('data_index',item._id);
    getOnePageById(articleContinue);

}

// 给继续阅读按钮挂载监听器,根据id获取该篇文章
function getOnePageById(e) {
    e.addEventListener('click',function() {
        var id = this.getAttribute('data_index');
        // console.log(id);
        location.href = `/getPage?id=${id}`;
    })
}

// 热度文章渲染
function renderHotArticleList(data) {
    var list = JSON.parse(data);
    list.forEach((item, index) => {
    var li = document.createElement('li');
        li.className = 'hot_item';
        li.innerText = item.title;
        li.setAttribute('data_index',item._id);
        getOnePageById(li);
        hotList.appendChild(li);
    })
}

// 最新评论渲染
function renderNewCommendList(data) {
    var list = JSON.parse(data);
    // console.log(list);
    // console.log(list);
    list.forEach((item, index) => {
        var li = document.createElement('li');
        li.className = 'commend_item';
        // console.log(item.commend);
        li.innerText = item.commend;
        li.setAttribute('data_index',item.fromId);
        getOnePageById(li);
        commendList.appendChild(li);
    })
}

// 最新5篇文章渲染
function renderNewArticleList(data) {
    footerList.innerHTML = '';
    var list = JSON.parse(data);
    // console.log(list);
    list.forEach((item,index) => {
        var li = document.createElement('li');
        li.className = 'footer_item';
        li.innerText = item.title;
        // 获取这五篇文章的id 点击阅读
        li.setAttribute('data_index',item._id);
        getOnePageById(li);
        footerList.appendChild(li);
    })
}

// 获取文章数目按钮渲染
function renderArticleNums(data) {
    var length = Math.ceil(parseInt(data)/5);
    // console.log(length);
    for(var i = 1; i <= length; i++) {
        var li = document.createElement('li');
        li.className = 'pages';
        li.innerText = i;
        // 分页按钮点击事件
        li.addEventListener('click',function() {
            var num = this.innerText;
            myAjax('GET',`/getNewArticleList?page=${num}`,null).then((data) => {
                renderNewArticleList(data);
            })
        })
        footerPages.appendChild(li);
    }
}

// 渲染全部文章
function renderAllArticleAtHome(data) {
    w.innerHTML = '';
    // 获取所有文章的信息
    var list = JSON.parse(data);
    // var list = data;
    console.log(list);
    list.forEach((item) => {
        var div = document.createElement('div');
        var h3 = document.createElement('h3');
        var p = document.createElement('p');
        var div2 = document.createElement('div');
        var button = document.createElement('button');
        var p2 = document.createElement('p');
        div.className = 'allarticle';
        h3.className = 'allarticle_title';
        p.className = 'allarticle_classify';
        div2.className = 'allarticle_content';
        button.className = 'allarticle_continue';
        p2.className = 'allarticle_time';
        // 渲染文章内容
        h3.innerText = item.title;
        p.innerText = item.classify;
        div2.innerText = item.content.slice(0, 200) + '...';
        button.innerText = '继续阅读全文>>';
        button.setAttribute('data_index',item._id);
        getOnePageById(button);
        // getOnePageById(button);
        p2.innerText = item.time;
        div2.appendChild(button);
        div.appendChild(h3);
        div.appendChild(p);
        div.appendChild(div2);
        div.appendChild(p2);
        w.appendChild(div);
    })
}

async function getData() {
    // 获取最新文章
    var getArticle = await myAjax('GET', '/getArticle', null);
    renderArticle(getArticle);

    // 获取热度文章
    var getHotAreicleList = await myAjax('GET', '/getHotArticleList', null);
    renderHotArticleList(getHotAreicleList);

    // 获取最新评论
    var getNewCommendList = await myAjax('GET', '/getNewCommendList', null);
    renderNewCommendList(getNewCommendList);

    // 获取最新5篇文章
    var getNewAriticleList = await myAjax('GET','/getNewArticleList?page=1',null);
    renderNewArticleList(getNewAriticleList);

    // 获取文章数量
    var getArticleNums = await myAjax('GET','/ArticleNums',null);
    renderArticleNums(getArticleNums);

    // 渲染全部文章
    var getAllArticleAtHome = await myAjax('GET','/getAllArticleAtHome',null);
    renderAllArticleAtHome(getAllArticleAtHome);
}

getData();